<template>
    <div class="page">
        <tabs :options="tabs" v-model="tabsActive" @onclick="handleTabClick"/>
        <router-view ref="ref-router-view"/>
    </div>
</template>

<style lang="less" scoped>
    .page{
        .title-view{
            padding-top: 1.2rem;
            text-align: center;
        }

        .date-select-box{
            margin: 1rem 0;
        }
    }
</style>

<script>
    export default {
        data(){
            return {
                tabs: ['债券估值', 'Shibor报价', '评级变动', '新债发行', '票据报价'],
                routes: [
                    '/study/valuation',
                    '/study/shibor',
                    '/study/grade',
                    '/study/newBond',
                    '/study/bill',
                ],
                tabsActive: 1,
            }
        },
        methods: {
            handleTabClick(key){
                this.$router.replace(this.routes[key]);
            },

            onNavEvent(key){
                const ref = this.$refs['ref-router-view'];
                ref && ref.onNavEvent && ref.onNavEvent(key);
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm=>{
                vm.tabsActive = vm.routes.indexOf(to.path);
            });
        },
        beforeRouteUpdate(to, from, next){
            this.tabsActive = this.routes.indexOf(to.path);
            next();
        }
    }
</script>